Skip to main content

Collage

The following code will display the Featured Media Widget.

<vdz-mashup-collage data-widget="true"> </vdz-mashup-collage>

Note: Make sure data-widget is set to true as this applies the VIDIZMO default styling to the widget.

VIDIZMO widgets have multiple events that are triggered on the various status and lifecycle changes. Following code examples explain how to utilize event listeners to subscribe to these events.

<script>
    document.getElementById("collage").addEventListener("on-mashups-loading", (event) => {
        console.log(event);
    console.log("onMashupLoading");
    });
    document.getElementById("collage").addEventListener("on-mashups-loaded", (event) => {
        console.log(event);
    console.log("onMashupLoaded")
    });
    document.getElementById("collage").addEventListener("on-mashups-loading-failed", (event) => {
        console.log(event);
    console.log("onMashupLoadingFailed")
    });
</script>
PropertyTypeDefaultRequiredDescription
search-criteriaMashupSearchCriteria- No- 
keywordstring- No- 
order-byMashupOrderBy- No- 
sort-typeSortType- No- 
page-sizenumber- No- 
page-indexnumber- No- 
is-featuredboolean- No- 
is-globalboolean- No- 
show-on-channel-libraryboolean- No- 
statusMashupStatus- No- 

There are no methods for this widget.

MethodParamsReturn TypeDescription
----
EventDataScenario
on-mashups-loadingmashupSearchCriteria:MashupSearchCriteriaWhen search criteria are changed and the call is not yet sent to the server.
on-mashups-loadedmashupInfo:MashupInfoUndefined is raised in case no mashups are returned from the server.
on-mashups-loading-failedexceptionWhen search call has failed.
on-slide-changednumberThe latest slide number will be returned.
on-play{ t: number, mashupInfo:MashupInfo}This method will return time from where a user wants to playback and mashup the object that needs to be played.

Sample Code​

<html>

    <head>
        <meta charset="UTF-8" />
        <!-- VIDIZMO Imports -->
        <script type="text/javascript"
            src="https://vidizmo-widgets.beta.vidizmo.com/static/js/vidizmo-player/player.js"></script>
        <link rel="stylesheet" href="https://vidizmo-widgets.beta.vidizmo.com/static/compiled/widget/widgets.css" />
        <script type="text/javascript"
            src="https://vidizmo-widgets.beta.vidizmo.com/static/compiled/widget/widgets.js"></script>
    </head>

    <body style="margin: 20px;">
        <vdz-mashup-collage id="collage" data-widget="true" page-size-md="4"
            search-criteria={"sortType":"ASC","pageSize":36,"isGlobal":true,"showOnChannelLibrary":true,"isFeatured":true}>
    </vdz-mashup-collage>

    <script>
        document.getElementById("collage").addEventListener("on-mashups-loading", (event) => {
            console.log(event);
        console.log("onMashupLoading");
        });
        document.getElementById("collage").addEventListener("on-mashups-loaded", (event) => {
            console.log(event);
        console.log("onMashupLoaded")
        });
        document.getElementById("collage").addEventListener("on-mashups-loading-failed", (event) => {
            console.log(event);
        console.log("onMashupLoadingFailed")
        });
    </script>

</body>

</html >

Next Steps​

You can playback the content by simply clicking on the content within the Media Library Gallery Widget. Upon clicking the content, an event onPlay() would be raised and listened to.

You can learn more about this in the following articles:

Scenario - Playback Media from Media Library